<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script type="text/javascript">
    <!--
    $(function() {
    $(".メニューアイテム一覧（ＵＬ）").sortable();
    $(".メニューアイテム一覧（ＵＬ）").disableSelection();
    $(".並び順通知ボタン").click(function() {
        var result = $(".メニューアイテム一覧（ＵＬ）").sortable("toArray");
        $(".返却並び順").val(result);
        $(".並び順変更フォーム").submit();
    });

    $(".テーブル並び替え").sortable();
    $(".テーブル並び替え").disableSelection();

    });
    -->
    </script>

</head>
<body>
<form action="" method="get" class="並び順変更フォーム">
<ul class="メニューアイテム一覧（ＵＬ）">
    <li id="1">Item 1 <a href="http://www.yahoo.co.jp">an</a></li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
    <li id="4">Item 4</li>
    <li id="5">Item 5</li>
</ul>
<input type="hidden" name="result" class="返却並び順"/>
<button id="submit" class="並び順通知ボタン">submit</button>
</form>
<?php if (!empty($_GET['result'])) {?>
    <div><?php echo $_GET['result'];?></div>
<?php }?>
<!-- テーブル実装部 -->
    <table class="テーブル">
        <thead>
            <tr>
                <th>名前</th>
                <th>特徴</th>
            </tr>
        </thead>
        <tbody class="テーブル並び替え">
            <tr>
                <th>とんこつラーメン</th>
                <td>コッテリ</td>
            </tr>
            <tr>
                <th>塩ラーメン</th>
                <td>うまい</td>
            </tr>
            <tr>
                <th>醤油ラーメン</th>
                <td>イケてる</td>
            </tr>
            <tr>
                <th>二郎</th>
                <td>関内</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
